<template>
  <div class="index-container">
    <el-card class="card">
      <!-- 插入card头部信息包含一个整屏的分割横线 -->
      <template #header>
        <div class="top">
          <div class="left">用户列表</div>
          <div class="right">
            <span>有效用户:{{ user_true_total }}</span>
            <span>总用户:{{ user_total }}</span>
          </div>
        </div>
      </template>
      <div class="content">
        <el-form
          ref="queryForm"
          class="demo-form-inline"
          :inline="true"
          :model="queryForm"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input
              v-model="queryForm.mobile"
              clearable
              placeholder="用户手机号"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="queryForm.truename"
              clearable
              placeholder="真实姓名"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="form.v1"
              placeholder="骑行区域"
              @change="changeArea"
            >
              <el-option
                v-for="item in options1"
                :key="item.register_area_id"
                :label="item.areaname"
                :value="item.register_area_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="form.v2"
              placeholder="实名状态"
              @change="changeName"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="form.v3"
              placeholder="押金缴纳类型"
              @change="changeY"
            >
              <el-option
                v-for="item in options3"
                :key="item.deposit_status"
                :label="item.label"
                :value="item.deposit_status"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="form.v4"
              placeholder="是否绑定手机号"
              @change="changeM"
            >
              <el-option
                v-for="item in options4"
                :key="item.is_bind_mobile"
                :label="item.label"
                :value="item.is_bind_mobile"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="form.v5"
              placeholder="使用状态"
              @change="changeStatus"
            >
              <el-option
                v-for="item in options5"
                :key="item.status"
                :label="item.label"
                :value="item.status"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.order" clearable placeholder="备注" />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              native-type="submit"
              type="primary"
              @click="handleQuery"
            >
              查询
            </el-button>
            <el-button @click="resetForm('queryForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格体部分 -->
      <el-table
        ref="tableSort"
        v-loading="listLoading"
        :border="border"
        :data="dataList"
        @selection-change="setSelectRows"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column
          align="center"
          label="序号"
          show-overflow-tooltip
          width="55"
        >
          <!-- 序号内容的列 -->
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          align="center"
          :label="item.label"
          :sortable="item.sortable"
        >
          <template #default="{ row }">
            <span>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          show-overflow-tooltip
          width="300"
        >
          <template #default="{ row }">
            <el-button plain type="primary" @click="handleEdit(row)">
              设置
            </el-button>
            <el-button plain type="warning" @click="handlePhone(row)">
              机型
            </el-button>
            <el-button plain type="success" @click="handleHd(row)">
              活动
            </el-button>
            <!-- <el-button plain type="success" @click="handleDelete(row)">
              退还金额
            </el-button> -->
          </template>
        </el-table-column>
        <template #empty>
          <el-image
            class="vab-data-empty"
            :src="require('@/assets/empty_images/data_empty.png')"
          />
        </template>
      </el-table>
      <el-pagination
        background
        :current-page="metaList.page"
        :layout="layout"
        :page-size="metaList.per_page"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <!-- <table-edit ref="show" /> -->
      <user-edit ref="edit" />
      <user-phone ref="show" />
      <user-hd ref="hd" />
    </el-card>
    <!-- <table-edit ref="edit" @fetch-data="fetchData" /> -->
  </div>
</template>

<script>
  import { getNumber, getList } from '@/api/shouye'
  import UserEdit from './components/userEdit.vue'
  import userPhone from './components/userP.vue'
  import userHd from './components/userHD.vue'
  // import VabDraggable from 'vuedraggable'

  export default {
    name: 'Order',
    components: {
      // TableEdit,
      UserEdit,
      userPhone,
      userHd,
      // VabDraggable,
    },
    data() {
      return {
        options1: [
          { register_area_id: '', areaname: '全部' },
          { register_area_id: '1', areaname: '中牟' },
          { register_area_id: '2', areaname: '郑州龙子湖' },
          { register_area_id: '3', areaname: '巩义' },
          { register_area_id: '4', areaname: '莆田' },
        ],
        options2: [
          { label: '全部', value: '' },
          { label: '未实名', value: '0' },
          { label: '已实名', value: '1' },
        ],

        options3: [
          { label: '全部', deposit_status: '' },
          { label: '未缴纳押金', deposit_status: '0' },
          { label: '已缴纳押金', deposit_status: '1' },
          { label: '免押金卡', deposit_status: '2' },
        ],
        options4: [
          { label: '全部', is_bind_mobile: '' },
          { label: '未绑定', is_bind_mobile: '0' },
          { label: '已绑定', is_bind_mobile: '1' },
        ],
        options5: [
          { label: '全部', status: '' },
          { label: '暂停使用', status: '0' },
          { label: '正常', status: '1' },
        ],
        form: {
          // register_area_id: '',
          // value: '',
          // deposit_status: '',
          // is_bind_mobile: '',
          // status: '',
        },
        isFullscreen: false,
        border: true,
        columns: [
          {
            label: '手机号码',
            width: 'auto',
            prop: 'mobile',
            sortable: true,
            disableCheck: true,
          },
          {
            label: '押金状态',
            width: 'auto',
            prop: 'deposit_status',
            sortable: true,
          },
          {
            label: '实名状态',
            width: 'auto',
            prop: 'card_status',
            sortable: true,
          },
          {
            label: '真实姓名',
            width: 'auto',
            prop: 'truename',
            sortable: true,
          },
          {
            label: '用户来源',
            width: 'auto',
            prop: 'register_source',
            sortable: true,
          },
          {
            label: '账户金额',
            width: '200',
            prop: 'recharge',
            sortable: true,
          },

          {
            label: '所属区域',
            width: '300',
            prop: 'areaname',
            sortable: true,
          },
          {
            label: '使用状态',
            width: '400',
            prop: 'account_status',
            sortable: true,
          },
          {
            label: '备注',
            width: '300',
            prop: 'time',
            sortable: true,
          },
        ],
        user_total: 0,
        user_true_total: 0,
        // dataList: [],
        dataList: [],
        // 加载状态
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        metaList: {},
        // 初始状态下跳转页面的数据
        // queryForm: {
        //   per_page: 10,
        // },
        queryForm: {
          page: 1,
          per_page: 10,
          // title: '',
        },
      }
    },
    computed: {
      dragOptions() {
        return {
          animation: 600,
          group: 'description',
        }
      },
    },
    created() {
      this.fetchData()
      // this.fetchDat1()
    },
    methods: {
      // handleReset() {},
      setSelectRows(val) {
        this.selectRows = val
      },
      // setvalue(value) {},
      // 选择骑行区域
      changeArea(e) {
        // console.log(e, '选择骑行的区域')
        this.queryForm.register_area_id = e
        // console.log(this.queryForm, '111')
      },
      //选择实名状态
      changeName(e) {
        // console.log(e, '选择实名状态')
        this.queryForm.is_card_certified = e
      },
      // 押金类型
      changeY(e) {
        // console.log(e, '选择押金情况')
        this.queryForm.deposit_status = e
      },
      // 手机是否绑定
      changeM(e) {
        // console.log(e, '手机绑定类型')
        this.queryForm.is_bind_mobile = e
      },
      // 使用状态
      changeStatus(e) {
        this.queryForm.status = e
      },
      handleEdit(row) {
        this.$refs['edit'].showEdit(row)
      },
      handlePhone(row) {
        this.$refs['show'].showEdit(row)
      },
      handleHd(row) {
        this.$refs['hd'].showEdit(row)
      },
      // 重置按钮不起作用
      resetForm() {
        // this.$refs[formName].resetFields()
        // 框架封装好的用不了，用的自己重新赋值初始值的表单并且重新加载fetchData接口函数
        this.queryForm = {
          page: 1,
          per_page: 10,
        }
        this.fetchData()
        console.log(this.queryForm, '这是啥玩意')
      },
      handleSizeChange(val) {
        this.queryForm.per_page = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.page = 1

        this.fetchData()
      },
      // 拿取接口的数据
      async fetchData() {
        // console.log(this.queryForm, 'YYYYYYY')
        this.listLoading = true
        const { data, meta } = await getList(this.queryForm)
        // console.log(this.queryForm, '第一个')

        this.dataList = data
        // console.log(this.dataList, 'dataList1111111')

        this.total = meta.total
        this.metaList = meta
        // console.log(this.data, 'wodeidig1235534564567')
        this.listLoading = false
        const { user_total, user_true_total } = await getNumber()
        this.user_total = user_total
        this.user_true_total = user_true_total
        console.log(this.queryForm, 'qqqq')

        // console.log(this.user_total, this.user_true_total, '我的个乖乖')
      },
    },
  }
</script>

//
<style lang="scss" scoped>
  .custom-table-container {
    ::v-deep {
      i {
        cursor: pointer;
      }
    }
    .stripe-panel,
    .border-panel {
      margin: 0 10px $base-margin 10px !important;
    }
  }
</style>
//
<style lang="scss">
  .custom-table-checkbox {
    [class*='ri'] {
      vertical-align: -2.5px;
      cursor: pointer;
    }

    .el-checkbox {
      margin: 5px 0 5px 8px;
    }
  }
</style>
<style>
  .vab-query-form-left-panel {
    border: 2px solid red !important;
  }
  .vab-query-form-right-panel {
    border: 1px solid yellow;
  }
</style>
<style scoped>
  .content {
    display: flex;
  }
  /* .el-form {
    width: 100%;
  } */
  .right {
    display: flex;
  }
  .top {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding-bottom: 10px;
  }
  .card {
    padding: 10px;
  }
  .right span:nth-of-type(1) {
    margin-right: 20px;
  }
</style>
